<template>
    <div id="myDate" v-click-outside>
        <!-- <input type="text" :value="forMyDate" disabled> -->
        <div class="myCont">
        <!-- <div v-if="isShow" class="myCont"> -->
            <div class="nav">
                <span class="select" @click="prevYear">&lt;</span>
                <span class="select" @click="prevMonth">&lt;&lt;</span>
                <span style="width:auto">{{time.year}}年{{time.month+1}}月</span>
                <!-- <span></span> -->
                <span class="select" @click="nextMonth">&gt;&gt;</span>
                <span class="select" @click="nextYear">&gt;</span>
            </div>
            <div class="content">
                <div>
                    <span v-for="i in weekDay" :key="i">{{i}}</span> 
                </div>
                <div v-for="k in 6" :key="k" class="weekMain">  
                    <!-- 判断是不是当月 -->
                    <span 
                        :data-time='visibeDays[(k-1)*7+(item-1)]'
                        v-for="item in 7" :key="item"
                        @click="chooseDate(visibeDays[(k-1)*7+(item-1)])"
                        :class="[
                            {notCurrentMonth:!isCurrentMonth(visibeDays[(k-1)*7+(item-1)])},
                            {today:isToday(visibeDays[(k-1)*7+(item-1)])},
                            {mySelect:isSelect(visibeDays[(k-1)*7+(item-1)])},
                            {selectBeforeDate:Date.parse(visibeDays[(k-1)*7+(item-1)]) == selectTimestamp}, 
                            {selectDate:isSelectFun({thatTime:Date.parse(visibeDays[(k-1)*7+(item-1)])})}, 
                            {selectStateDate:Date.parse(visibeDays[(k-1)*7+(item-1)]) === selectTimestamp[0]},
                            {selectEndDate:Date.parse(visibeDays[(k-1)*7+(item-1)]) === selectTimestamp[1]},
                            {isMarke:isMarkeFun({thatTime:Date.parse(visibeDays[(k-1)*7+(item-1)])})},
                        ]"
                    >
                    
                        <span>
                            {{visibeDays[(k-1)*7+(item-1)].getDate()}}
                        </span>
                    </span>
                </div>
                
            </div>
            <!-- <div class="footer select" @click="newToday">
                今天
            </div> -->
        </div>
    </div>
</template>
<script>
import * as utils from './util.js' //把所有方法变成这个对象
export default {
    directives:{         //自定义指令
        clickOutside: {   //指令的生命周期 默认写一个函数绑定的时候触发 更新的时候触发
            //这样写我们只希望绑定的时候触发
            bind(el,bindings,vnode){     //1.el:当前绑定的元素就是div  2.bindings是传入的参数 现在并没有传入参数  3.vnode是虚拟doom ，vnode就一个属性比较重要context
            //把事件绑定给document元素上 看一下点击的是否是当前这个元素的内部 
                let handler = (e)=>{
                    if(el.contains(e.target)){  //判断点击的元素是不是在当前元素内部
                        if(!vnode.context.isShow){
                            vnode.context.isShow=true
                        }
                    }else{
                        if(vnode.context.isShow){
                            vnode.context.isShow=false
                        } 
                    }
                }    
                el.handler = handler;   //把handler保存到当前元素上  为了保证组件销毁后移除
                document.addEventListener('click',handler)  //绑定点击事件
            },
            unbind(el){
                document.removeEventListener('click',el.handler)
            }
        }
    },
    data () {
        let {year,month} = utils.getYearMonthDay(this.value);
        return {
            isShow:true,  //控制日历面板是否可见
            weekDay:['日','一','二','三','四','五','六'],
            time:{year,month},
            selectTimestamp:[],                             //时间戳
        }
    },
    watch:{
        value(){
             alert(this.forMyDate)
        }
    },
    props:{
        value:{
            type:Date,
            default:()=>new Date //返回的类型必须是一个函数类型  包括数组 对象
        },
        dataLsit:{
            type:Object,
            default:() => Object
        }
    },
    mounted(){
       this.visibeDays
    },
    computed:{   //计算属性
        forMyDate(){
            let {year,month,day} = utils.getYearMonthDay(this.value); //把父组件传过来的数据 交给我们封装的方法处理
            return `${year}-${month+1}-${day}`
        },
        visibeDays(){
            //获取现在是星期几
            let {year,month} = utils.getYearMonthDay(utils.getDate(this.time.year,this.time.month,1))   
            //获取当前月份第一天
            let firstDay = utils.getDate(year,month,1)  //只要传入每月1号
            //获取当前是周几 然后往前移动几天
            let week = firstDay.getDay()                //getDay这个方法能获取到是周几
            let startDay = firstDay-week * 60 * 60 * 24 * 1000        //时间格式减自动换算成时间戳
            //循环42天 
            let arr = []
            for(let i=0 ; i<42 ;i++){
                arr.push(new Date(startDay+i*60*60*24*1000))
            }
            return arr
        },

    },
    methods:{
        isCurrentMonth(date){
            //判断当前年月
            let {year,month} = utils.getYearMonthDay(utils.getDate(this.time.year,this.time.month,1))
            //判断传入时间的年月
            let {year:y,month:m} = utils.getYearMonthDay(date)
            return year === y && month === m
        },
        //判断当天
        isToday(date){
            let {year,month,day} = utils.getYearMonthDay(new Date())
            let {year:y,month:m,day:d} = utils.getYearMonthDay(date)
            return year === y && month === m && day ===d
        },
        //判断选中
        isSelect(date){
            let {year,month,day} = utils.getYearMonthDay(this.value)
            let {year:y,month:m,day:d} = utils.getYearMonthDay(date)
            return year === y && month === m && day ===d
        },
        //选择日期
        chooseDate(date){
            if(this.selectTimestamp.length 
            && this.selectTimestamp.length < 2
            && this.selectTimestamp[0] > Date.parse(date)){
                return alert('结束时间段必须大于开始时间')
            }
            this.time = utils.getYearMonthDay(date)
            if(this.selectTimestamp.length === 2) this.selectTimestamp = []
            if(this.dataLsit.id === 1){
                debugger
                this.selectTimestamp = this.dataLsit.id === 1 ? this.selectTimestamp.length ? this.selectTimestamp : [] : ''
                this.selectTimestamp.push(Date.parse(date)) 
                if(this.selectTimestamp.length === 2) this.$emit('input',this.selectTimestamp)   //发射出去
            }else{
                this.selectTimestamp = Date.parse(date)
                this.$emit('input',this.selectTimestamp)   //发射出去
            }
            // this.isShow=false
        },
        //上一月
        prevMonth(){
            //获取当前年月的一个日期
            let newMonth = utils.getDate(this.time.year,this.time.month,1)
            newMonth.setMonth(newMonth.getMonth()-1)
            this.time = utils.getYearMonthDay(newMonth)
            if(this.dataLsit.id !== 2 ) return
            this.$emit('tabCalendar',Date.parse(newMonth))   //发射出去
        },
        //下一月
        nextMonth(){
            let newMonth = utils.getDate(this.time.year,this.time.month,1)
            newMonth.setMonth(newMonth.getMonth()+1)
            this.time = utils.getYearMonthDay(newMonth)
            if(this.dataLsit.id !== 2 ) return
            this.$emit('tabCalendar',Date.parse(newMonth))   //发射出去
        },
        //上一年
        prevYear(){
            let newYear = utils.getDate(this.time.year,this.time.month,1)
            newYear.setFullYear(newYear.getFullYear()-1)
            this.time = utils.getYearMonthDay(newYear)
            if(this.dataLsit.id !== 2 ) return
            this.$emit('tabCalendar',Date.parse(newYear))   //发射出去
        },
        //下一年
        nextYear(){
            let newYear = utils.getDate(this.time.year,this.time.month,1)
            newYear.setFullYear(newYear.getFullYear()+1)
            this.time = utils.getYearMonthDay(newYear)
            if(this.dataLsit.id !== 2 ) return
            this.$emit('tabCalendar',Date.parse(newYear))   //发射出去
        },
        //跳转到当前时间
        newToday(){
            this.time = utils.getYearMonthDay(new Date)
        },
        //选择时间段
        isSelectFun:function(data){
            if(this.dataLsit.id === 1
            &&this.selectTimestamp.length === 2 
            && this.selectTimestamp[0] < data.thatTime 
            && this.selectTimestamp[1] > data.thatTime){
                return true
            }
            return false
        },
        //签到的标记点
        isMarkeFun:function(data){
            var that = this
            return that.dataLsit.markList.includes(new Date(data.thatTime).toLocaleDateString())
        }
    }
    
}
</script>
<style scoped>
    #myDate{
        margin: auto;
        width: 100%;
        max-width: 560px;
        text-align: center;
        user-select: none;
    }
    .nav{
        display: flex;
        background-color: #fff;
        justify-content: space-between;
    }
    input{
        text-align: center;
    }
    .myCont{
        /* background-color: #fff; */
        /* box-shadow: 2px 2px 2px  pink,-2px -2px 2px pink; */
    }
    .content div{
        /* display: flex;
        justify-content: space-between; */
        margin: 4px 0;
    }
    .content div span{
        display: inline-flex;
        justify-content:space-around;    
        width: 14%;
        height: 46px;
        align-items: center;
        font-weight: 700;
        color: #333;
        box-sizing: border-box;
    }
    .content .weekMain{
         cursor: pointer;
     }
    .content .weekMain>span:hover::before,.selectDate,.selectBeforeDate::before{
        background: #dcebff
    }
    .content div .notCurrentMonth>span{
        font-size: 12px;
        color: rgba(121, 118, 118, 0.3)
    }
    .select{
        cursor: pointer;
        
    }
    .content div .today{
        /* background-color: red; */
        color: #fff;
        position: relative
    }
    
    .content div .today>span{
        /* background-color: red; */
        color: inherit;
    }
    .content div .today::before{
        background-color: #1191FF;
    }
    .content .weekMain>span{
        position: relative;
    }
    .content .weekMain>span>span{
        z-index: 1;
    }
    .content .weekMain>span::before{
        content: '';
        padding: 28%;
        border-radius:50%; 
        position: absolute;
        display: inline-block;
    }
    .mySelect {
        /* border: 1px solid red; */
        /* border-radius: 3px; */
    }
    .selectDate{
        /* background: #dcebff */
    }
    .content .weekMain>span.selectStateDate{
        border-radius:0%; 
        border-top-left-radius: 50%;
        background-color: #dcebff;
        border-bottom-left-radius: 50%;
    }
    .content .weekMain>span.selectEndDate{
        border-radius:0%; 
        border-top-right-radius: 50%;
        background-color: #dcebff;
        border-bottom-right-radius: 50%;
    }
    .isMarke::after{    
        content: '';
        bottom: 12%;
        padding: 4%;
        border-radius: 50%;
        position: absolute;
        display: inline-block;
        background-color: #1191FF;
    }
    
</style>
